<template>
    <div class="list" ref="wrapper">
      <div >
        <div class="area">
          <div class="title">定位城市</div>
          <div class="city_list">
            <div class="btn_list">
              <div class="btn">{{this.city}}</div>
            </div>
          </div>
        </div>
        <div class="area">
          <div class="title">热门城市</div>
          <div class="city_list">
            <div class="btn_list" v-for="item of hotCityList" :key="item.id" @click="handleChangeCitys(item.name)">
              <div class="btn">{{item.name}}</div>
            </div>
          </div>
        </div>
        <!--城市列表-->
        <div class="area area_cites" v-for="(item,key) of allCityList" :key="key" :ref="key">
          <div class="title">{{key}}</div>
          <div class="city_list" v-for="itemInfo of item" :key="itemInfo.id" @click="handleChangeCitys(itemInfo.name)">
            <div class="cites_list">
              <div class="cites">{{itemInfo.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import { mapState,mapActions,mapMutations } from 'vuex'  //vuex获取state的值的api
    export default {
        name: "CityList",
        props:{
          hotCityList:Array,
          allCityList:Object,
          letter:String
        },computed:{
        ...mapState({city:'city'})
      },
        methods:{
          handleChangeCitys(city){
           // this.$store.dispatch('chagecity', city);
            this.chagecity(city)
           this.$router.push("/")
          },
          ...mapActions(['chagecity'])
        },
      watch :{
        letter () {
          if (this.letter){
            const lts=this.$refs[this.letter][0]
            this.scroll.scrollToElement(lts)
          }
        }
      },
      mounted () {
        this.scroll = new BScroll(this.$refs.wrapper)
      }
    }
</script>

<style scoped lang="stylus">
  .list
    position:absolute
    top:1rem
    bottom :0
    left :0
    right :0
    overflow :hidden
    .area
      .title
        font-size :.24rem
        line-height:.64rem
        background :#f5f5f5
        padding:0 .2rem
      .city_list
        padding:.1rem .6rem .1rem .1rem
        overflow:hidden
        .btn_list
          float:left
          text-align center
          width :33.33%
          .btn
            padding :.1rem 0
            margin :.1rem
            border:.02rem solid #e5e5e5
            border-radius .06rem
    .area_cites
      .city_list
        padding:.1rem .6rem 0 0
        border-bottom:.02rem solid #e3e3e3
        .cites_list
          line-height:.64rem
          padding-left .2rem



</style>
